<template>
  <el-card class="bigCard">
    <TopBar v-if="checkPerm('addCategory')" @addFn="showDialog = true" @searchFn="searchFn" />
    <el-table :data="categoryData" border style="width: 100%">
      <el-table-column prop="image" label="图片">
        <template slot-scope="{ row }">
          <el-image class="table-image" :src="row.image" fit="fit" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="desc" label="介绍" />
      <el-table-column prop="todo" label="操作">
        <template slot-scope="{ row }">
          <el-row type="flex" justify="center">
            <el-button v-if="checkPerm('delCategory')" type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button v-if="checkPerm('editCategory')" type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageControl._limit"
        :total="total"
        @current-change="changeFn"
      /> -->
    <MyPagination :page-size="pageControl._limit" :total="total" @getStart="getStart" />

    <AddCategory :id="currentId" ref="dialog" :dialog-visible.sync="showDialog" @updateCategories="updateCategories" />
  </el-card>
</template>

<script>
import { getCategories, getCategoriesTotal, deleteCategory } from '@/api/category'
import TopBar from './component/top-bar.vue'
import AddCategory from './component/add-category.vue'

export default {
  components: {
    TopBar,
    AddCategory
  },
  data() {
    return {
      categoryData: [], // 所有分类数据
      showDialog: false, // 控制弹框显示隐藏
      pageControl: {
        // 控制分页
        _limit: 3,
        _start: 0
      },
      total: 0,
      currentId: -1,
      searchText: '' // 保存当前搜索的关键字
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    // 点击分页器 改变页码 _start改变
    getStart(start) {
      this.pageControl._start = start
      this.getCategories(this.searchText)
    },
    // 获取分类列表
    async getCategories(data) {
      let res, total
      // 每页3个
      if (data) {
        // 搜索框有内容的情况
        res = await getCategories({ ...this.pageControl, title_contains: data })
        total = await getCategoriesTotal({ title_contains: data })
      } else {
        res = await getCategories({ ...this.pageControl })
        // 获取数据总条数，分页用
        total = await getCategoriesTotal()
      }
      this.total = total.data
      this.categoryData = res.data
    },

    // 分页
    changeFn(page) {
      this.pageControl._start = (page - 1) * this.pageControl._limit
      this.getCategories(this.searchText)
    },

    // 子组件弹框点击确认，刷新数据获取分类列表
    updateCategories() {
      this.getCategories()
    },

    // 编辑分类
    editFn(id) {
      this.showDialog = true

      // 当前点击的id curId赋值为子组件传过来的id
      this.currentId = id
      // DOM是异步更新的
      // 当子组件点击了编辑按钮，传给该父组件，更新了curId 传给弹框组件后，此时要调用接口 获取部门信息回显
      this.$nextTick(() => {
        this.$refs.dialog.getCategoryById()
      })
    },

    // 删除分类
    async delFn(id) {
      // console.log(80, id)
      // await deleteCategory(id)

      this.$confirm('是否删除该分类？', '删除', { type: 'warning' })
        .then(async() => {
          await deleteCategory(id)
          this.getCategories()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 点击搜索
    searchFn(value) {
      this.pageControl._start = 0 // 重置start
      this.searchText = value
      this.getCategories(value)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-image {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
</style>
